<template>
  <div>
    <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        background-color="#2c3e50"
        text-color="#fff"
        active-text-color="#ffd04b"
        @open="handleOpen"
        @close="handleClose"
      >
        <!-- <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu> -->
        <el-menu-item v-for="(it,idx) in menuList" :key="idx" :index="it.index" @click="handleSelectMenu">
          <el-icon><icon-menu /></el-icon>
          <span>{{ it.title }}</span>
        </el-menu-item>
      </el-menu>
  </div>
</template>

<script setup>
import {ref,reactive} from 'vue'

const menuList = reactive([
  {
    index: '1',
    title: '覆盖端到端分析与支撑',
    icon: 'icon-menu',
  },
  {
    index: '2',
    title: 'DNT无限仿真与AIDP',
    icon: 'icon-menu',
  },
  {
    index: '3',
    title: '集中参数管理',
    icon: 'icon-menu',
  },
  {
    index: '4',
    title: '集中优化ICOS',
    icon: 'icon-menu',
  },
  {
    index: '5',
    title: '容量分析与优化',
    icon: 'icon-menu',
  },
  {
    index: '6',
    title: '覆盖补增',
    icon: 'icon-menu',
  },
  {
    index: '7',
    title: '智能运维',
    icon: 'icon-menu',
  },
  {
    index: '8',
    title: '基站节能',
    icon: 'icon-menu',
  },
])


const emits = defineEmits(["active"]);

const handleSelectMenu = (e) => {
  // console.log(e)
  emits("active", e.index);
}

</script>

<style scoped>

</style>